<template>
  <div>
    <!--
必填：
action 上传地址，这里没有就给个 #
file-list 管理图片的数组

样式：
list-type 决定了样式
class 动态 class 可以在有图片情况下隐藏加号

事件钩子
on-preview 指定预览的处理函数，只要绑定一个函数就会出现放大镜
on-remove 删除图片的回调绑定   有两个参数，被删的文件本身和最新的列表，不用的话其实就是假的删除，vue里面是没有改变的
on-change 修改或添加图片的回调绑定  和上面那个一样，不加其实就是假的数据

上传相关：
before-upload 上传前的钩子
http-request 覆盖默认的上传行为

 -->
    <el-upload
      action="#"
      :file-list="fileList"
      list-type="picture-card"
      :on-preview="preview"
      :before-upload="beforeUpload"
      :on-remove="onRemove"
      :on-change="onChange"
      :http-request="upload"
      :class="{disable:fileList.length>0}"
    ><i class="el-icon-plus" /></el-upload>
    <el-dialog title="预览" :visible="showDialog" @close="showDialog=false">
      <el-row type="flex" justify="center">
        <img :src="imgUrl" alt=""></el-row>
    </el-dialog>
  </div>
</template>
<script>
// 引入库
import COS from 'cos-js-sdk-v5'
// 创建实例
const cos = new COS({
  SecretId: 'AKIDiGXYIm0xc1A2cv61DCvNYR3OSFkzyg8J',
  SecretKey: 'wby5uSklVzC7m9F4B1atue7JEsFK8gwv'
})
export default {
  components: {},
  props: {},
  data() {
    return {
      // 图片管理数组
      fileList: [
        {
        //   每个照片都是一个对象，最很重要的属性是url
          url: 'https://img0.baidu.com/it/u=1443138647,880212012&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=571'
        }
      ],
      showDialog: false,
      imgUrl: ''
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    preview(img) {
      console.log('预览', img)
      //   显示不了
      this.showDialog = true
      this.imgUrl = img.url
    },
    onRemove(file, newFileList) {
      // 第一个参数是被删除的文件对象
      // 第二个是删除完以后最新的文件列表
      // 手动将最新列表覆盖到 this.fileList
      this.fileList = [...newFileList]
      //   这个时候数组长度会变，打印出来被删除的地址
      console.log(file)
    },
    onChange(file, newFileList) {
      this.fileList = [...newFileList]
    },
    beforeUpload(file) {
      console.log(file)
      console.log('上传前')
      // 这里是上传前的校验，只要在这个函数中返回false 即可阻止上传
      // 校验大小
      const maxSize = 200 * 1024
      if (file.size > maxSize) {
        this.$message.warning('图片大小不能超过200k')
      }

      // 校验格式
      const whiteList = ['image/jepg', 'image/png']
      if (whiteList.indexOf(file.type) === -1) {
        this.$message.warning('目前只支持jpeg,png的格式')
        return false
      }
    },
    upload(data) {
      console.log(data.file)
      console.log('真正上传')

      cos.putObject({
        // 储存桶名称
        Bucket: 'back-stage-1307117935',
        //  所在区域
        Region: 'ap-guangzhou',
        //  想要保存的文件名
        Key: data.file.name,
        //  标准储存的固定写法不用改
        StorageClass: 'STANDARD',
        //  图片本身
        Body: data.file,
        onProgress: function(progressData) {
          //  进度变化的回调
          console.log(JSON.stringify(progressData))
        }
      }, (err, data) => {
        // 上传结束后的回调（无论成功或者失败）
        console.log(err || data)
        if (!err) {
          console.log(data)
          // 这里是异步，element不知道什么时候上传完
          // 上传完毕需要后续处理数据
          // 1 用腾讯云地址覆盖原来本地地址
          // 2 告诉element 上传已经成功，用箭头函数，否则this会被改变
          this.fileList[0].url = `http://${data.Location}`
          this.fileList[0].status = 'success'
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.disable {
  // /deep/ .el-upload--picture-card {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}
</style>
